<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>在线OJ系统</title>
    <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Bootstrap 4-->
    <link rel="shortcut icon" href="./img/logo.jpg">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>

    <nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
        <a class="navbar-brand font-weight-bold" href="#">在线OJ</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topMenu"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="topMenu">

        </div>
    </nav>

    <!--hero section-->
    <section class="bg-hero">
        <div class="container">
            <div class="row vh-100">
                <div class="col-sm-12 my-auto text-center">
                    <h1>在线OJ</h1>
                    <p class="lead text-capitalize my-4">
                        基于 Springboot 实现的《在线OJ系统》
                    </p>
                    <a href="https://gitee.com/Weetaby/project-OJ" class="btn btn-outline-light btn-radius btn-lg">Gitee 链接</a>
                </div>
            </div>
        </div>
    </section>

    <!--components-->
    <section class="my-5 pt-5">
        <div class="container">
            <!-- 表示题目列表页 -->
            <div class="row mb-5" id="tables">
                <div class="col-sm-12">
                    <div class="mt-3 mb-5">
                        <h3>题目列表</h3>
                        <table class="table table-stripted">
                            <thead>
                                <tr>
                                    <th>id</th>
                                    <th>标题</th>
                                    <th>难度</th>
                                </tr>
                            </thead>
                            <tbody id="problemTable"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--footer-->
    <section class="py-5 bg-dark">
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">

                    <p class="pt-2 text-muted">
                        &copy; by 霸王龙骨架带走渡渡鸟
                    </p>
                </div>
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>

    <script>
        function getProblems(){
            /**
             * 通过ajax从服务器获取到题目列表
             */
            $.ajax({
                url: "problem/getAll",
                type: "get",
                success: function(data){
                    if (data.code == 200){
                        makeProblemTable(data.data);
                    } else {
                        alert(data.data);
                    }
                }
            })
        }

        /**
         * 把数据转换成HTML页面片段
         * @param problems
         */
        function makeProblemTable(problems){
            let problemTable = document.querySelector('#problemTable');
            for(let problem of problems){
                let tr = document.createElement("tr");

                let tdId = document.createElement("td");
                tdId.innerHTML = problem.id;
                tr.appendChild(tdId);

                let tdTitle = document.createElement("td");
                let a = document.createElement("a");
                a.innerHTML = problem.title;
                a.href = 'problemDetail.html?id=' + problem.id;
                a.target ='_blank';
                tdTitle.appendChild(a);
                tr.appendChild(tdTitle);

                let tdLevel = document.createElement("td");
                tdLevel.innerHTML = problem.level;
                tr.appendChild(tdLevel);
                
                problemTable.appendChild(tr);
            }
        }
        getProblems();

    </script>
</body>

</html>